<style lang="scss" scoped>
:deep() {
  .loop-item {
    margin-right: 20px;
  }
}
</style>

<template>
  <div class="m-[100px]">
    <!-- 顶部图片 -->
    <div class="relative w-[400px] h-[400px] m-b[18px] flex justify-center bg-white" ref="previewRef">
      <img :src="previewImg" alt="" class="max-w-[100%] max-h-[100%] align-middle">
      <template v-if="!isOutside">
        <div class="w-[200px] h-[200px] absolute left-0 top-0 bg-black bg-opacity-[0.2]" :style="maskStyle"></div>
        <div
          class="w-[400px] h-[400px] absolute left-[412px] top-0 bg-[#F8F8F8] bg-[length:800px_800px] bg-no-repeat z-10"
          :style="{backgroundImage: `url(${previewImg})`, ...largeStyle}"
        />
      </template>
    </div>
    <!-- 缩略图 -->
    <div class="relative px-[17px] w-[400px]">
      <span class="absolute top-0 left-0 w-[16px] h-[60px] leading-[60px] z-50 bg-[#F3F3F3] text-center cursor-pointer" @click="prevImage">{{ '<' }}</span>
      <div class="relative h-[60px] overflow-hidden" ref="deatilTurnRef">
        <div
          class="flex flex-row absolute transition-[left] ease-in duration-500"
          :style="{left: imgListLeft + 'px', width: imgListWidth + 'px'}"
        >
          <div
            v-for="(item, index) in imgList"
            :key="index"
            class="flex align-center justify-center w-[60px] h-[60px] rounded-sm flex-shrink-0 relative ml-[6px] first:ml-0"
            :class="{'border border-[#ff5000]': currentImageIndex === index}"
            @mouseenter="handleMouseenter(item, index)"
          >
            <img :src="item" alt="" class="max-w-[58px] max-h-[58px] cursor-pointer rounded-sm" @click="currentImageIndex = index">
          </div>
        </div>
      </div>
      <span class="absolute top-0 right-0 w-[16px] h-[60px] leading-[60px] z-50 bg-[#F3F3F3] text-center cursor-pointer" @click="nextImage">{{ '>' }}</span>
    </div> 

    <!-- 无缝滚动 -->
    <div class=" w-[1260px] mx-auto overflow-hidden">
      <m-seamless-roll :content="imgList" style="height: 80px;" direction="left" >
        <template v-slot="{item}">
          <div class="w-[233px] h-[80px]">
            <img :src="item" alt="" class="w-full h-full">
          </div>
        </template>
      </m-seamless-roll>
    </div> 
  </div>
</template>

<script setup>
import { reactive, ref, watch, computed } from 'vue'
import { useMouseInElement } from '@vueuse/core'

// 大图片 ref
const previewRef = ref(null)
const { elementX, elementY, isOutside } = useMouseInElement(previewRef)
// 遮罩样式
const maskStyle = reactive({
  top: '0px',
  left: '0px'
})
// 放大镜图片的样式
const largeStyle = reactive({
  'background-position-x': '0px',
  'background-position-y': '0px'
})
// 监听移动
watch([elementX, elementY, isOutside], () => {
  let top = elementY.value - 100 // 减去遮罩尺寸的一半
  let left = elementX.value - 100
  if (top > 200) top = 200
  if (top < 0) top = 0
  if (left > 200) left = 200
  if (left < 0) left = 0
  maskStyle.top = `${top}px`
  maskStyle.left = `${left}px`
  largeStyle['background-position-x'] = -2 * left + 'px'
  largeStyle['background-position-y'] = -2 * top + 'px'
})

// 上方展示的图片
const previewImg = ref('https://cbu01.alicdn.com/img/ibank/O1CN01wKjAIn1Bx5GGFhKIc_!!2212215930011-0-cib.jpg')
// 缩略图列表
const imgList = ref([
  'https://cbu01.alicdn.com/img/ibank/O1CN01wKjAIn1Bx5GGFhKIc_!!2212215930011-0-cib.jpg',
  'https://cbu01.alicdn.com/img/ibank/O1CN01E1eDWK1Bx5G8RobhP_!!2212215930011-0-cib.jpg',
  'https://cbu01.alicdn.com/img/ibank/O1CN01R2ps821Bx5GE4UqaC_!!2212215930011-0-cib.jpg',
  'https://cbu01.alicdn.com/img/ibank/O1CN01rPJaaC1Bx5GA57yd7_!!2212215930011-0-cib.jpg',
  'https://cbu01.alicdn.com/img/ibank/O1CN01a2lCj01Bx5GE4XnmQ_!!2212215930011-0-cib.jpg',
  'https://cbu01.alicdn.com/img/ibank/O1CN01wKjAIn1Bx5GGFhKIc_!!2212215930011-0-cib.jpg',
  'https://cbu01.alicdn.com/img/ibank/O1CN01E1eDWK1Bx5G8RobhP_!!2212215930011-0-cib.jpg',
  'https://cbu01.alicdn.com/img/ibank/O1CN01R2ps821Bx5GE4UqaC_!!2212215930011-0-cib.jpg',
  'https://cbu01.alicdn.com/img/ibank/O1CN01rPJaaC1Bx5GA57yd7_!!2212215930011-0-cib.jpg',
  'https://cbu01.alicdn.com/img/ibank/O1CN01a2lCj01Bx5GE4XnmQ_!!2212215930011-0-cib.jpg',
  'https://cbu01.alicdn.com/img/ibank/O1CN01wKjAIn1Bx5GGFhKIc_!!2212215930011-0-cib.jpg',
  'https://cbu01.alicdn.com/img/ibank/O1CN01E1eDWK1Bx5G8RobhP_!!2212215930011-0-cib.jpg',
])

// 缩略图的 index
const currentImageIndex = ref(0)
// 缩略图的位置偏移
const imgListLeft = ref(0)

// 动态计算缩略图的总宽度
const imgListWidth = computed(() => {
  return imgList.value.length * 60 + (imgList.value.length - 1) * 6
})

// 鼠移入图片
const handleMouseenter = (item, index) => {
  currentImageIndex.value = index
  previewImg.value = item
}

// 点击向左
const prevImage = () => {
  if (imgListLeft.value === 0) {
    return
  }
  imgListLeft.value += 60
}
// 点击向右
const deatilTurnRef = ref(null)
const nextImage = () => {
  const maxLeft = -(imgListWidth.value - deatilTurnRef.value.offsetWidth) // 展示在页面上的缩略图容器宽度
  if (imgListLeft.value > maxLeft) {
    imgListLeft.value -= 60 // 66是单个缩略图（含间距）的宽度
  }
}
</script>
